<template>
  <div class="vue-office-container">
    <!-- 控制栏 -->
    <div class="controls">
      <el-button
        type="primary"
        size="mini"
        @click="downloadFile"
        icon="el-icon-download"
      >
        下载原始文件
      </el-button>
      <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" placement="top">
        <el-button
          :icon="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"
          @click="toggleFullscreen"
        />
      </el-tooltip>
    </div>
    <!-- 动态加载不同格式的预览组件 -->
    <vue-office-docx
      v-if="fileExt === 'docx'"
      :src="src"
      @rendered="handleRendered"
    />
    <vue-office-excel
      v-else-if="fileExt === 'xlsx' || fileExt === 'xls'"
      :src="src"
      @rendered="handleRendered"
    />
    <vue-office-pptx
      v-else-if="fileExt === 'pptx'"
      :src="src"
      @rendered="handleRendered"
    />

    <vue-office-pdf
      v-else-if="fileExt === 'pdf'"
      :src="src"
      :options="pdfOptions"
      @rendered="handleRendered"
    />

    <!-- 不支持的文件类型提示 -->
    <div v-else class="unsupported-type">
      <p>暂不支持 {{ fileExt }} 格式的文件预览</p>
      <p>建议转换为以下格式：</p>
      <ul>
        <li>文档：docx</li>
        <li>表格：xlsx</li>
        <li>演示稿：pptx</li>
        <li>PDF：pdf</li>
      </ul>
      <button @click="handleConvert" class="convert-button">格式转换帮助</button>
    </div>
  </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
import VueOfficePptx from '@vue-office/pptx'

import { downloadMinioFile } from '@/api/common/common';

export default {
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf,
    VueOfficePptx
  },
  props: {
    src: [String, ArrayBuffer, Blob],  // 支持多种数据源
    fileExt: String,                    // 文件扩展名
    originalSrc: String,                 // 原始文件的URL
    isFullscreen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pdfOptions: {
        height: 'auto', // 自动高度适应，确保不会因固定高度而隐藏部分内容
        pdfjs: {
          disableAutoFetch: false,
          disableStream: true,       // 禁用流式加载
          disableRange: true,        // 关键！禁用范围请求
          cMapUrl: 'https://unpkg.com/pdfjs-dist@2.6.347/cmaps/',
          cMapPacked: true,
          maxImageSize: Infinity,
          useWorker: true,
          renderAllPages: true, // 渲染所有页面
          lazyLoading: false,   // 禁用懒加载
          initialRenderPages: 1000
        }
      }
    }
  },
  methods: {
    handleRendered() {
      this.$emit('rendered')
    },
    handleConvert() {
      this.$emit('convert', this.fileExt)
    },
    downloadFile() {
      if (this.originalSrc) {
        downloadMinioFile(this.originalSrc);
      } else {
        this.$message.error('无法下载文件，原始文件URL未提供')
      }
    },
    toggleFullscreen() {
      this.isFullscreen = !this.isFullscreen
      if (this.isFullscreen) {
        this.$el.requestFullscreen()
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      }
    }
  }
}
</script>

<style scoped>
.vue-office-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #f5f5f5;
  position: relative;
  overflow-y: auto; /* 允许垂直滚动 */
}

/* 覆盖默认样式 */
@import '~@vue-office/docx/lib/index.css';
@import '~@vue-office/excel/lib/index.css';
/* @import '~@vue-office/pptx/lib/index.css'; */

.unsupported-type {
  padding: 2rem;
  text-align: center;
  color: #606266;
  line-height: 1.8;
}

.unsupported-type p:first-child {
  color: #f56c6c;
  font-weight: bold;
  margin-bottom: 1rem;
}

.convert-button {
  margin-top: 1.5rem;
  padding: 8px 20px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.convert-button:hover {
  background: #66b1ff;
}

/* 增强PDF容器样式 */
::v-deep .vue-office-pdf {
  height: auto !important;
  min-height: 800px; /* 确保容器有足够的初始高度 */
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  width: 100%; /* 确保宽度充分利用 */
}

/* 确保PDF页面容器不受限制 */
::v-deep .vue-office-pdf .pdfViewer {
  height: auto !important;
}

/* 确保每个PDF页面都能完整显示 */
::v-deep .vue-office-pdf .page {
  margin-bottom: 10px;
}

/* 控制栏样式 */
.controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
}
</style>
